<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端代码规范 | 地球反三体组织</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/icons/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css">
    <meta name="description" content="">
    
    <link rel="preload" href="/assets/css/0.styles.95f09eca.css" as="style"><link rel="preload" href="/assets/js/app.892efb48.js" as="script"><link rel="preload" href="/assets/js/3.3689c535.js" as="script"><link rel="preload" href="/assets/js/1.76946483.js" as="script"><link rel="preload" href="/assets/js/17.8d9b3f45.js" as="script"><link rel="prefetch" href="/assets/js/10.994dfc46.js"><link rel="prefetch" href="/assets/js/11.5243d02b.js"><link rel="prefetch" href="/assets/js/12.bbc947db.js"><link rel="prefetch" href="/assets/js/13.3c555110.js"><link rel="prefetch" href="/assets/js/14.791ae1f2.js"><link rel="prefetch" href="/assets/js/15.41a71b1f.js"><link rel="prefetch" href="/assets/js/16.ea9f6e56.js"><link rel="prefetch" href="/assets/js/18.990bf501.js"><link rel="prefetch" href="/assets/js/19.37c1c21a.js"><link rel="prefetch" href="/assets/js/20.5aae01e6.js"><link rel="prefetch" href="/assets/js/21.41e758f1.js"><link rel="prefetch" href="/assets/js/22.afc2de9d.js"><link rel="prefetch" href="/assets/js/23.7a76c57a.js"><link rel="prefetch" href="/assets/js/24.ee89a782.js"><link rel="prefetch" href="/assets/js/25.aae5f43e.js"><link rel="prefetch" href="/assets/js/26.eec74c57.js"><link rel="prefetch" href="/assets/js/27.cdae5890.js"><link rel="prefetch" href="/assets/js/28.85c693b7.js"><link rel="prefetch" href="/assets/js/29.d40f3724.js"><link rel="prefetch" href="/assets/js/30.cdb0bfe0.js"><link rel="prefetch" href="/assets/js/31.f83a512c.js"><link rel="prefetch" href="/assets/js/32.87779683.js"><link rel="prefetch" href="/assets/js/33.e9f606e7.js"><link rel="prefetch" href="/assets/js/34.6b5688ff.js"><link rel="prefetch" href="/assets/js/35.a0ba89c1.js"><link rel="prefetch" href="/assets/js/36.18a00568.js"><link rel="prefetch" href="/assets/js/37.fd83be59.js"><link rel="prefetch" href="/assets/js/38.cf0ec149.js"><link rel="prefetch" href="/assets/js/39.3a424296.js"><link rel="prefetch" href="/assets/js/4.4ef4e9bb.js"><link rel="prefetch" href="/assets/js/40.3ac4f22a.js"><link rel="prefetch" href="/assets/js/41.f4119124.js"><link rel="prefetch" href="/assets/js/42.926201e5.js"><link rel="prefetch" href="/assets/js/43.b8af425d.js"><link rel="prefetch" href="/assets/js/44.b5af9721.js"><link rel="prefetch" href="/assets/js/45.2cf05349.js"><link rel="prefetch" href="/assets/js/46.6ef53d5a.js"><link rel="prefetch" href="/assets/js/47.0c0d1d6f.js"><link rel="prefetch" href="/assets/js/48.afcf25ca.js"><link rel="prefetch" href="/assets/js/49.56f7da91.js"><link rel="prefetch" href="/assets/js/5.152764ca.js"><link rel="prefetch" href="/assets/js/50.6dbb0658.js"><link rel="prefetch" href="/assets/js/6.8ab23831.js"><link rel="prefetch" href="/assets/js/7.b1119581.js"><link rel="prefetch" href="/assets/js/8.ebb978a3.js"><link rel="prefetch" href="/assets/js/9.a72af8f5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.95f09eca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-73b6f1b4><div data-v-73b6f1b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-73b6f1b4 data-v-73b6f1b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-58d5ab76 data-v-73b6f1b4 data-v-73b6f1b4><h3 class="title" style="display:none;" data-v-58d5ab76 data-v-58d5ab76>地球反三体组织</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><input type="password" value="" data-v-58d5ab76> <span data-v-58d5ab76>Konck! Knock!</span> <button data-v-58d5ab76>OK</button></label> <div class="footer" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><span data-v-58d5ab76><i class="iconfont reco-theme" data-v-58d5ab76></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-58d5ab76>vuePress-theme-reco</a></span> <span data-v-58d5ab76><i class="iconfont reco-copyright" data-v-58d5ab76></i> <a data-v-58d5ab76><span data-v-58d5ab76>kuangw</span>
            
          <!---->
          2020
        </a></span></div></div> <div class="hide" data-v-73b6f1b4><header class="navbar" data-v-73b6f1b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <div class="pt-bgBar"></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="地球反三体组织" class="logo"> <span class="site-name">地球反三体组织</span></a> <div class="links"><div><div class="my-color isDrak"><div class="div1"><img src="http://photo.tuituisoft.com/picgo/20201202095920.png" alt></div> <div class="div2"><img src="http://photo.tuituisoft.com/picgo/20201202095945.png" alt></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont iconfont iconhome"></i>
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      Category
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/book/" class="nav-link"><i class="iconfont undefined"></i>
  book
</a></li><li class="dropdown-item"><!----> <a href="/categories/code/" class="nav-link"><i class="iconfont undefined"></i>
  code
</a></li><li class="dropdown-item"><!----> <a href="/categories/tool/" class="nav-link"><i class="iconfont undefined"></i>
  tool
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  Tag
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont undefined"></i>
      工具
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tool/vuepress/" class="nav-link"><i class="iconfont undefined"></i>
  vuepress(博客框架)
</a></li><li class="dropdown-item"><!----> <a href="/tool/picgo.html" class="nav-link"><i class="iconfont undefined"></i>
  PicGo(图床工具)
</a></li><li class="dropdown-item"><h4>vscode</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tool/vscode/plug-recommend.html" class="nav-link"><i class="iconfont undefined"></i>
  vscode插件推荐
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/diy-code.html" class="nav-link"><i class="iconfont undefined"></i>
  如何自定义vscode的代码块
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/code-block.html" class="nav-link"><i class="iconfont undefined"></i>
  常用代码块
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div> <a href="https://gitee.com/kuangweiwudi/my-node" target="_blank" rel="noopener noreferrer" class="repo-link"><i class="iconfont reco-github"></i>
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask" data-v-73b6f1b4></div> <aside class="sidebar" data-v-73b6f1b4><div class="personal-info-wrapper" data-v-3eba7259 data-v-73b6f1b4><img src="http://image.woai996.com/picgo/20201127101131.png" alt="author-avatar" class="personal-img" data-v-3eba7259> <h3 class="name" data-v-3eba7259>
    kuangw
  </h3> <div class="num" data-v-3eba7259><div data-v-3eba7259><h3 data-v-3eba7259>29</h3> <h6 data-v-3eba7259>Article</h6></div> <div data-v-3eba7259><h3 data-v-3eba7259>22</h3> <h6 data-v-3eba7259>Tag</h6></div></div> <hr data-v-3eba7259></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont iconfont iconhome"></i>
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      Category
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/book/" class="nav-link"><i class="iconfont undefined"></i>
  book
</a></li><li class="dropdown-item"><!----> <a href="/categories/code/" class="nav-link"><i class="iconfont undefined"></i>
  code
</a></li><li class="dropdown-item"><!----> <a href="/categories/tool/" class="nav-link"><i class="iconfont undefined"></i>
  tool
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  Tag
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont undefined"></i>
      工具
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tool/vuepress/" class="nav-link"><i class="iconfont undefined"></i>
  vuepress(博客框架)
</a></li><li class="dropdown-item"><!----> <a href="/tool/picgo.html" class="nav-link"><i class="iconfont undefined"></i>
  PicGo(图床工具)
</a></li><li class="dropdown-item"><h4>vscode</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tool/vscode/plug-recommend.html" class="nav-link"><i class="iconfont undefined"></i>
  vscode插件推荐
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/diy-code.html" class="nav-link"><i class="iconfont undefined"></i>
  如何自定义vscode的代码块
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/code-block.html" class="nav-link"><i class="iconfont undefined"></i>
  常用代码块
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div> <a href="https://gitee.com/kuangweiwudi/my-node" target="_blank" rel="noopener noreferrer" class="repo-link"><i class="iconfont reco-github"></i>
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-58d5ab76 data-v-73b6f1b4><h3 class="title" style="display:none;" data-v-58d5ab76 data-v-58d5ab76>前端代码规范</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><input type="password" value="" data-v-58d5ab76> <span data-v-58d5ab76>Konck! Knock!</span> <button data-v-58d5ab76>OK</button></label> <div class="footer" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><span data-v-58d5ab76><i class="iconfont reco-theme" data-v-58d5ab76></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-58d5ab76>vuePress-theme-reco</a></span> <span data-v-58d5ab76><i class="iconfont reco-copyright" data-v-58d5ab76></i> <a data-v-58d5ab76><span data-v-58d5ab76>kuangw</span>
            
          <!---->
          2020
        </a></span></div></div> <div data-v-73b6f1b4><main class="page"><div class="page-title" style="display:none;position:relative;"><div class="page-bg-img"><img src="https://w.wallhaven.cc/full/g7/wallhaven-g7zl1e.jpg"></div> <h1>前端代码规范</h1> <hr> <div data-v-523cfaee><i class="iconfont reco-account" data-v-523cfaee><span data-v-523cfaee>kuangw</span></i> <i class="iconfont reco-date" data-v-523cfaee><span data-v-523cfaee>2020-11-29</span></i> <i class="iconfont reco-eye" data-v-523cfaee><span id="/common/front-code-norm.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-523cfaee><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#d6dce5;"></a></span></i> <i class="iconfont reco-tag tags" data-v-523cfaee><span class="tag-item" data-v-523cfaee>代码规范</span><span class="tag-item" data-v-523cfaee>前端</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><div class="custom-block tip"><p class="custom-block-title">写在最前面</p> <p>这篇文章是转载自阿里的前端代码规范，偶然看到，发现干货极多，便拿来收藏，同时时刻看到鞭策自己遵守规范。</p></div> <h1 id="前端代码规范"><a href="#前端代码规范" class="header-anchor">#</a> 前端代码规范</h1> <p>Front Standard Guide</p> <h1 id="前端-js-项目开发规范"><a href="#前端-js-项目开发规范" class="header-anchor">#</a> 前端 JS 项目开发规范</h1> <p>规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。</p> <p>引自《阿里规约》的开头片段：</p> <p><em>----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。</em></p> <h1 id="一、编程规约"><a href="#一、编程规约" class="header-anchor">#</a> 一、编程规约</h1> <h2 id="一-命名规范"><a href="#一-命名规范" class="header-anchor">#</a> (一)命名规范</h2> <h4 id="_1-1-1-项目命名"><a href="#_1-1-1-项目命名" class="header-anchor">#</a> 1.1.1 项目命名</h4> <p>全部采用小写方式， 以中划线分隔。</p> <p>正例：<code>mall-management-system</code></p> <p>反例：<code>mall_management-system / mallManagementSystem</code></p> <h4 id="_1-1-2-目录命名"><a href="#_1-1-2-目录命名" class="header-anchor">#</a> 1.1.2 目录命名</h4> <p>全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数</p> <p>正例： <code>scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc</code></p> <p>反例： <code>script / style / demo_scripts / demoStyles / imgs / docs</code></p> <p>【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名</p> <p>正例： <code>head-search / page-loading / authorized / notice-icon</code></p> <p>反例： <code>HeadSearch / PageLoading</code></p> <p>【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
正例： <code>page-one / shopping-car / user-management</code></p> <p>反例： <code>ShoppingCar / UserManagement</code></p> <h4 id="_1-1-3-js、css、scss、html、png-文件命名"><a href="#_1-1-3-js、css、scss、html、png-文件命名" class="header-anchor">#</a> 1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名</h4> <p>全部采用小写方式， 以中划线分隔</p> <p>正例： <code>render-dom.js / signup.css / index.html / company-logo.png</code></p> <p>反例： <code>renderDom.js / UserManagement.html</code></p> <h4 id="_1-1-4-命名严谨性"><a href="#_1-1-4-命名严谨性" class="header-anchor">#</a> 1.1.4 命名严谨性</h4> <p>代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用</p> <p>正例：<code>henan / luoyang / rmb 等国际通用的名称，可视同英文。</code></p> <p>反例：<code>DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3</code></p> <p><strong>杜绝完全不规范的缩写，避免望文不知义：</strong></p> <p>反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。</p> <h3 id="二-html-规范-vue-template-同样适用"><a href="#二-html-规范-vue-template-同样适用" class="header-anchor">#</a> (二)HTML 规范 （Vue Template 同样适用）</h3> <h4 id="_1-2-1-html-类型"><a href="#_1-2-1-html-类型" class="header-anchor">#</a> 1.2.1 HTML 类型</h4> <p>推荐使用 HTML5 的文档类型申明： .
（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。</p> <ul><li>规定字符编码</li> <li>IE 兼容模式</li> <li>规定字符编码</li> <li>doctype 大写</li></ul> <p>正例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=Edge<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Page title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/company-logo.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Company<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="_1-2-2-缩进"><a href="#_1-2-2-缩进" class="header-anchor">#</a> 1.2.2 缩进</h4> <p>缩进使用 2 个空格（一个 tab）</p> <p>嵌套的节点应该缩进。</p> <h4 id="_1-2-3-分块注释"><a href="#_1-2-3-分块注释" class="header-anchor">#</a> 1.2.3 分块注释</h4> <p>在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 英文 中文 start &gt;

&lt;!-- 英文 中文 end &gt;
正例：


&lt;body&gt;
  &lt;!-- header 头部 start --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 图片会把a标签给撑开，所以不用设置a标签的大小 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/header.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- header 头部 end --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_1-2-4-语义化标签"><a href="#_1-2-4-语义化标签" class="header-anchor">#</a> 1.2.4 语义化标签</h3> <p>HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签</p> <p>正例</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>反例</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="_1-2-5-引号"><a href="#_1-2-5-引号" class="header-anchor">#</a> 1.2.5 引号</h4> <p>使用双引号(&quot; &quot;) 而不是单引号(’ ') 。</p> <p>正例： ``</p> <p>反例： ``</p> <h3 id="三-css-规范"><a href="#三-css-规范" class="header-anchor">#</a> (三) CSS 规范</h3> <h4 id="_1-3-1-命名"><a href="#_1-3-1-命名" class="header-anchor">#</a> 1.3.1 命名</h4> <ul><li>类名使用小写字母，以中划线分隔</li> <li>id 采用驼峰式命名</li> <li>scss 中的变量、函数、混合、placeholder 采用驼峰式命名</li></ul> <p>ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称</p> <p>不推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.fw-800</span> <span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.red</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>推荐:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.heavy</span> <span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.important</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_1-3-2-选择器"><a href="#_1-3-2-选择器" class="header-anchor">#</a> 1.3.2 选择器</h4> <p>1)css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。</p> <p>2)很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。</p> <p>不推荐:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.content .title</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>推荐:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.content &gt; .title</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_1-3-3-尽量使用缩写属性"><a href="#_1-3-3-尽量使用缩写属性" class="header-anchor">#</a> 1.3.3 尽量使用缩写属性</h4> <p>不推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> palatino<span class="token punctuation">,</span> georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.6<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token property">padding-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre></div><p>推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">font</span><span class="token punctuation">:</span> 100%/1.6 palatino<span class="token punctuation">,</span> georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 1em 2em<span class="token punctuation">;</span>
</code></pre></div><h4 id="_1-3-4-每个选择器及属性独占一行"><a href="#_1-3-4-每个选择器及属性独占一行" class="header-anchor">#</a> 1.3.4 每个选择器及属性独占一行</h4> <p>不推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">button</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span><span class="token property">background</span><span class="token punctuation">:</span>#00a0e9<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">button</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span>#00a0e9<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_1-3-5-省略0后面的单位"><a href="#_1-3-5-省略0后面的单位" class="header-anchor">#</a> 1.3.5 省略0后面的单位</h4> <p>不推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_1-3-6-避免使用id选择器及全局标签选择器防止污染全局样式"><a href="#_1-3-6-避免使用id选择器及全局标签选择器防止污染全局样式" class="header-anchor">#</a> 1.3.6 避免使用ID选择器及全局标签选择器防止污染全局样式</h4> <p>不推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#header</span><span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.header</span><span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="四-less-规范"><a href="#四-less-规范" class="header-anchor">#</a> (四) LESS 规范</h3> <h4 id="_1-4-1-代码组织"><a href="#_1-4-1-代码组织" class="header-anchor">#</a> 1.4.1 代码组织</h4> <h5 id="_1-将公共less文件放置在style-less-common文件夹"><a href="#_1-将公共less文件放置在style-less-common文件夹" class="header-anchor">#</a> 1)将公共less文件放置在style/less/common文件夹</h5> <p>例:// color.less,common.less</p> <h5 id="_2-按以下顺序组织"><a href="#_2-按以下顺序组织" class="header-anchor">#</a> 2)按以下顺序组织</h5> <p>1、@import;
2、变量声明;
3、样式声明;</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;mixins/size.less&quot;</span><span class="token punctuation">;</span></span>

<span class="token atrule"><span class="token rule">@default-text-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span></span>

<span class="token selector">.page</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 960px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_1-4-2-避免嵌套层级过多"><a href="#_1-4-2-避免嵌套层级过多" class="header-anchor">#</a> 1.4.2 避免嵌套层级过多</h4> <p>将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现</p> <p>不推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.main</span><span class="token punctuation">{</span>
  <span class="token selector">.title</span><span class="token punctuation">{</span>
    <span class="token selector">.name</span><span class="token punctuation">{</span>
       <span class="token property">color</span><span class="token punctuation">:</span>#fff
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>推荐：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.main-title</span><span class="token punctuation">{</span>
   <span class="token selector">.name</span><span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span>#fff
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="五-javascript-规范"><a href="#五-javascript-规范" class="header-anchor">#</a> (五) Javascript 规范</h3> <h4 id="_1-5-1-命名"><a href="#_1-5-1-命名" class="header-anchor">#</a> 1.5.1 命名</h4> <h5 id="_1-采用小写驼峰命名-lowercamelcase-代码中的命名均不能以下划线-也不能以下划线或美元符号结束"><a href="#_1-采用小写驼峰命名-lowercamelcase-代码中的命名均不能以下划线-也不能以下划线或美元符号结束" class="header-anchor">#</a> 1) 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束</h5> <p>反例： <code>_name / name_ / name$</code></p> <h5 id="_2-方法名、参数名、成员变量、局部变量都统一使用-lowercamelcase-风格-必须遵从驼峰形式。"><a href="#_2-方法名、参数名、成员变量、局部变量都统一使用-lowercamelcase-风格-必须遵从驼峰形式。" class="header-anchor">#</a> 2) 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。</h5> <p>正例： <code>localValue / getHttpMessage() / inputUserId</code></p> <p>*<em><strong>其中 method 方法命名必须是 动词 或者 动词+名词 形式*</strong></em></p> <p>正例：<code>saveShopCarData /openShopCarInfoDialog</code></p> <p>反例：<code>save / open / show / go</code></p> <p>*<em><strong>特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）*</strong></em></p> <div class="language- extra-class"><pre class="language-text"><code>add / update / delete / detail / get
</code></pre></div><p><strong>附： 函数方法常用的动词:</strong></p> <div class="language- extra-class"><pre class="language-text"><code>get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
</code></pre></div><h5 id="_3-常量命名全部大写-单词间用下划线隔开-力求语义表达完整清楚-不要嫌名字长。"><a href="#_3-常量命名全部大写-单词间用下划线隔开-力求语义表达完整清楚-不要嫌名字长。" class="header-anchor">#</a> 3) 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。</h5> <p>正例： <code>MAX_STOCK_COUNT</code></p> <p>反例： <code>MAX_COUNT</code></p> <h4 id="_1-5-2-代码格式"><a href="#_1-5-2-代码格式" class="header-anchor">#</a> 1.5.2 代码格式</h4> <h5 id="_1-使用-2-个空格进行缩进"><a href="#_1-使用-2-个空格进行缩进" class="header-anchor">#</a> 1) 使用 2 个空格进行缩进</h5> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h5 id="_2-不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。"><a href="#_2-不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。" class="header-anchor">#</a> 2) 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。</h5> <blockquote><p>说明：任何情形，没有必要插入多个空行进行隔开。</p></blockquote> <h4 id="_1-5-3-字符串"><a href="#_1-5-3-字符串" class="header-anchor">#</a> 1.5.3 字符串</h4> <p>统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：</p> <p>正例:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'foo'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> testDiv <span class="token operator">=</span> <span class="token string">'&lt;div id=&quot;test&quot;&gt;&lt;/div&gt;'</span><span class="token punctuation">;</span>
</code></pre></div><p>反例:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'foo'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> testDiv <span class="token operator">=</span> <span class="token string">&quot;&lt;div id='test'&gt;&lt;/div&gt;&quot;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_1-5-4-对象声明"><a href="#_1-5-4-对象声明" class="header-anchor">#</a> 1.5.4 对象声明</h4> <h5 id="_1-使用字面值创建对象"><a href="#_1-使用字面值创建对象" class="header-anchor">#</a> 1)使用字面值创建对象</h5> <p>正例： <code>let user = {};</code></p> <p>反例： <code>let user = new Object();</code></p> <h5 id="_2-使用字面量来代替对象构造器"><a href="#_2-使用字面量来代替对象构造器" class="header-anchor">#</a> 2) 使用字面量来代替对象构造器</h5> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  city<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
user<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
user<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
user<span class="token punctuation">.</span>city <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_1-5-5-使用-es6-7"><a href="#_1-5-5-使用-es6-7" class="header-anchor">#</a> 1.5.5 使用 ES6,7</h4> <p>必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。</p> <blockquote><p>必须强制使用 ES6, ES7 的新语法，比如箭头函数、await/async ， 解构， let ， for…of 等等</p></blockquote> <h4 id="_1-5-6-括号"><a href="#_1-5-6-括号" class="header-anchor">#</a> 1.5.6 括号</h4> <p>下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_1-5-7-undefined-判断"><a href="#_1-5-7-undefined-判断" class="header-anchor">#</a> 1.5.7 undefined 判断</h4> <p>永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> person <span class="token operator">===</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>person <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_1-5-8-条件判断和循环最多三层"><a href="#_1-5-8-条件判断和循环最多三层" class="header-anchor">#</a> 1.5.8 条件判断和循环最多三层</h4> <p>条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。</p> <h4 id="_1-5-9-this-的转换命名"><a href="#_1-5-9-this-的转换命名" class="header-anchor">#</a> 1.5.9 this 的转换命名</h4> <p>对上下文 this 的引用只能使用’self’来命名</p> <h4 id="_1-5-10-慎用-console-log"><a href="#_1-5-10-慎用-console-log" class="header-anchor">#</a> 1.5.10 慎用 console.log</h4> <p>因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能</p> <h1 id="二、vue-项目规范"><a href="#二、vue-项目规范" class="header-anchor">#</a> 二、Vue 项目规范</h1> <h3 id="一-vue-编码基础"><a href="#一-vue-编码基础" class="header-anchor">#</a> (一) Vue 编码基础</h3> <p>vue 项目规范以 Vue 官方规范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。</p> <blockquote><p>请仔仔细细阅读 Vue 官方规范，切记，此为第一步。</p></blockquote> <h4 id="_2-1-1-组件规范"><a href="#_2-1-1-组件规范" class="header-anchor">#</a> 2.1.1. 组件规范</h4> <h5 id="_1-组件名为多个单词。"><a href="#_1-组件名为多个单词。" class="header-anchor">#</a> 1) 组件名为多个单词。</h5> <p>组件名应该始终是多个单词组成（大于等于 2），且命名规范为<code>KebabCase</code>格式。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'TodoItem'</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Todo'</span><span class="token punctuation">,</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'todo-item'</span><span class="token punctuation">,</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h5 id="_2-组件文件名为-pascal-case-格式"><a href="#_2-组件文件名为-pascal-case-格式" class="header-anchor">#</a> 2) 组件文件名为 pascal-case 格式</h5> <p>正例：</p> <div class="language- extra-class"><pre class="language-text"><code>components/
|- my-component.vue
</code></pre></div><p>反例：</p> <div class="language- extra-class"><pre class="language-text"><code>components/
|- myComponent.vue
|- MyComponent.vue
</code></pre></div><h5 id="_3-基础组件文件名为-base-开头-使用完整单词而不是缩写。"><a href="#_3-基础组件文件名为-base-开头-使用完整单词而不是缩写。" class="header-anchor">#</a> 3) 基础组件文件名为 base 开头，使用完整单词而不是缩写。</h5> <p>正例：</p> <div class="language- extra-class"><pre class="language-text"><code>components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
</code></pre></div><p>反例：</p> <div class="language- extra-class"><pre class="language-text"><code>components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
</code></pre></div><h5 id="_4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名"><a href="#_4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名" class="header-anchor">#</a> 4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名</h5> <p>正例：</p> <div class="language- extra-class"><pre class="language-text"><code>components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整单词）
</code></pre></div><p>反例：</p> <div class="language- extra-class"><pre class="language-text"><code>components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了缩写）
</code></pre></div><h5 id="_5-在-template-模版中使用组件-应使用-pascalcase-模式-并且使用自闭合组件。"><a href="#_5-在-template-模版中使用组件-应使用-pascalcase-模式-并且使用自闭合组件。" class="header-anchor">#</a> 5) 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。</h5> <p>正例：</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;
&lt;MyComponent /&gt;
&lt;Row&gt;&lt;table :column=&quot;data&quot;/&gt;&lt;/Row&gt;
</code></pre></div><p>反例：</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;my-component /&gt; &lt;row&gt;&lt;table :column=&quot;data&quot;/&gt;&lt;/row&gt;
</code></pre></div><h5 id="_6-组件的-data-必须是一个函数"><a href="#_6-组件的-data-必须是一个函数" class="header-anchor">#</a> 6) 组件的 data 必须是一个函数</h5> <p>当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话，子组件之间的属性值会互相影响。</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'jack'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'jack'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h5 id="_7-prop-定义应该尽量详细"><a href="#_7-prop-定义应该尽量详细" class="header-anchor">#</a> 7) Prop 定义应该尽量详细</h5> <ul><li>必须使用 camelCase 驼峰命名</li> <li>必须指定类型</li> <li>必须加上注释，表明其含义</li> <li>必须加上 required 或者 default，两者二选其一</li> <li>如果有业务需要，必须加上 validator 验证</li></ul> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code> props<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// 组件状态，用于控制组件的颜色</span>
   status<span class="token operator">:</span> <span class="token punctuation">{</span>
     type<span class="token operator">:</span> String<span class="token punctuation">,</span>
     required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
     <span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword">return</span> <span class="token punctuation">[</span>
         <span class="token string">'succ'</span><span class="token punctuation">,</span>
         <span class="token string">'info'</span><span class="token punctuation">,</span>
         <span class="token string">'error'</span>
       <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span>
     <span class="token punctuation">}</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 用户级别，用于显示皇冠个数</span>
   userLevel：<span class="token punctuation">{</span>
      type<span class="token operator">:</span> String<span class="token punctuation">,</span>
      required<span class="token operator">:</span> <span class="token boolean">true</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h5 id="_8-为组件样式设置作用域"><a href="#_8-为组件样式设置作用域" class="header-anchor">#</a> 8) 为组件样式设置作用域</h5> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn btn-close&quot;</span><span class="token operator">&gt;</span><span class="token constant">X</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 使用 <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">scoped</span><span class="token template-punctuation string">`</span></span> 特性 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style scoped<span class="token operator">&gt;</span>
  <span class="token punctuation">.</span>btn<span class="token operator">-</span>close <span class="token punctuation">{</span>
    background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn btn-close&quot;</span><span class="token operator">&gt;</span><span class="token constant">X</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 没有使用 <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">scoped</span><span class="token template-punctuation string">`</span></span> 特性 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
  <span class="token punctuation">.</span>btn<span class="token operator">-</span>close <span class="token punctuation">{</span>
    background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><h5 id="_9-如果特性元素较多-应该主动换行。"><a href="#_9-如果特性元素较多-应该主动换行。" class="header-anchor">#</a> 9) 如果特性元素较多，应该主动换行。</h5> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>MyComponent foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
    foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
    foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
 <span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>MyComponent foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span> foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span> foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span> foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span> bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span> baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><h4 id="_2-1-2-模板中使用简单的表达式"><a href="#_2-1-2-模板中使用简单的表达式" class="header-anchor">#</a> 2.1.2. 模板中使用简单的表达式</h4> <p>组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> normalizedFullName <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token comment">// 复杂表达式已经移入一个计算属性</span>
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">normalizedFullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
       <span class="token punctuation">{</span><span class="token punctuation">{</span>
          fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
           <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
</code></pre></div><h4 id="_2-1-3-指令都使用缩写形式"><a href="#_2-1-3-指令都使用缩写形式" class="header-anchor">#</a> 2.1.3 指令都使用缩写形式</h4> <p>指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>input
  @input<span class="token operator">=</span><span class="token string">&quot;onInput&quot;</span>
  @focus<span class="token operator">=</span><span class="token string">&quot;onFocus&quot;</span>
<span class="token operator">&gt;</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>input
  v<span class="token operator">-</span>on<span class="token operator">:</span>input<span class="token operator">=</span><span class="token string">&quot;onInput&quot;</span>
  @focus<span class="token operator">=</span><span class="token string">&quot;onFocus&quot;</span>
<span class="token operator">&gt;</span>
</code></pre></div><h4 id="_2-1-4-标签顺序保持一致"><a href="#_2-1-4-标签顺序保持一致" class="header-anchor">#</a> 2.1.4 标签顺序保持一致</h4> <p>单文件组件应该总是让标签顺序保持为 `</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><p>反例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><h4 id="_2-1-5-必须为-v-for-设置键值-key"><a href="#_2-1-5-必须为-v-for-设置键值-key" class="header-anchor">#</a> 2.1.5 必须为 v-for 设置键值 key</h4> <h4 id="_2-1-6-v-show-与-v-if-选择"><a href="#_2-1-6-v-show-与-v-if-选择" class="header-anchor">#</a> 2.1.6 v-show 与 v-if 选择</h4> <p>如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。</p> <h4 id="_2-1-7-script-标签内部结构顺序"><a href="#_2-1-7-script-标签内部结构顺序" class="header-anchor">#</a> 2.1.7 script 标签内部结构顺序</h4> <p>components &gt; props &gt; data &gt; computed &gt; watch &gt; filter &gt; 钩子函数（钩子函数按其执行顺序） &gt; methods</p> <h4 id="_2-1-8-vue-router-规范"><a href="#_2-1-8-vue-router-规范" class="header-anchor">#</a> 2.1.8 Vue Router 规范</h4> <h5 id="_1-页面跳转数据传递使用路由参数"><a href="#_1-页面跳转数据传递使用路由参数" class="header-anchor">#</a> 1) 页面跳转数据传递使用路由参数</h5> <p>页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。</p> <p>正例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token string">' 123'</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'userCenter'</span><span class="token punctuation">,</span> query<span class="token operator">:</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_2-使用路由懒加载-延迟加载-机制"><a href="#_2-使用路由懒加载-延迟加载-机制" class="header-anchor">#</a> 2) 使用路由懒加载（延迟加载）机制</h5> <div class="language- extra-class"><pre class="language-text"><code>    {
        path: '/uploadAttachment',
        name: 'uploadAttachment',
        meta: {
          title: '上传附件'
        },
        component: () =&gt; import('@/view/components/uploadAttachment/index.vue')
      },
</code></pre></div><h5 id="_3-router-中的命名规范"><a href="#_3-router-中的命名规范" class="header-anchor">#</a> 3) router 中的命名规范</h5> <p>path、childrenPoints 命名规范采用<code>kebab-case</code>命名规范（尽量vue文件的目录结构保持一致，因为目录、文件名都是<code>kebab-case</code>，这样很方便找到对应的文件）</p> <p>name 命名规范采用<code>KebabCase</code>命名规范且和component组件名保持一致！（因为要保持keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 动态加载</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> reload <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/reload'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'reload'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Main<span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'动态加载'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'icon iconfont'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'/reload/smart-reload-list'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'SmartReloadList'</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">'SmartReload'</span><span class="token punctuation">,</span>
          childrenPoints<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">'查询'</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">'smart-reload-search'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">'执行reload'</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">'smart-reload-update'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">'查看执行结果'</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">'smart-reload-result'</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
          <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/reload/smart-reload/smart-reload-list.vue'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_4-router-中的-path-命名规范"><a href="#_4-router-中的-path-命名规范" class="header-anchor">#</a> 4) router 中的 path 命名规范</h5> <p>path除了采用<code>kebab-case</code>命名规范以外，必须以 / 开头，即使是children里的path也要以 / 开头。如下示例</p> <ul><li></li></ul> <p>目的：</p> <p>经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件
*</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/file'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'File'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Main<span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'文件服务'</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">'ios-cloud-upload'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'/file/file-list'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'FileList'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/file/file-list.vue'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'/file/file-add'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'FileAdd'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/file/file-add.vue'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'/file/file-update'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'FileUpdate'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/file/file-update.vue'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</code></pre></div><h3 id="二-vue-项目目录规范"><a href="#二-vue-项目目录规范" class="header-anchor">#</a> (二) Vue 项目目录规范</h3> <h4 id="_2-2-1-基础"><a href="#_2-2-1-基础" class="header-anchor">#</a> 2.2.1 基础</h4> <p>vue 项目中的所有命名一定要与后端命名统一。</p> <p>比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！</p> <h4 id="_2-2-2-使用-vue-cli-脚手架"><a href="#_2-2-2-使用-vue-cli-脚手架" class="header-anchor">#</a> 2.2.2 使用 Vue-cli 脚手架</h4> <p>使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。</p> <h4 id="_2-2-3-目录说明"><a href="#_2-2-3-目录说明" class="header-anchor">#</a> 2.2.3 目录说明</h4> <p>目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。</p> <div class="language- extra-class"><pre class="language-text"><code>src                               源码目录
|-- api                              所有api接口
|-- assets                           静态资源，images, icons, styles等
|-- components                       公用组件
|-- config                           配置信息
|-- constants                        常量信息，项目所有Enum, 全局常量等
|-- directives                       自定义指令
|-- filters                          过滤器，全局工具
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- plugins                          插件，全局使用
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- themes                           自定义样式主题
|-- views                            视图目录
|   |-- role                             role模块名
|   |-- |-- role-list.vue                    role列表页面
|   |-- |-- role-add.vue                     role新建页面
|   |-- |-- role-update.vue                  role更新页面
|   |-- |-- index.less                      role模块样式
|   |-- |-- components                      role模块通用组件文件夹
|   |-- employee                         employee模块
</code></pre></div><h5 id="_1-api-目录"><a href="#_1-api-目录" class="header-anchor">#</a> 1) api 目录</h5> <ul><li>文件、变量命名要与后端保持一致。</li> <li>此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。</li> <li>api 中的方法名字要与后端 api url 尽量保持语义高度一致性。</li> <li>对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。</li></ul> <p>正例：</p> <p>后端 url： EmployeeController.java</p> <div class="language- extra-class"><pre class="language-text"><code>/employee/add
/employee/delete/{id}
/employee/update
</code></pre></div><p>前端： employee.js</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 添加员工</span>
  <span class="token function-variable function">addEmployee</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">'/employee/add'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 更新员工信息</span>
  <span class="token function-variable function">updateEmployee</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">'/employee/update'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 删除员工</span>
  <span class="token function-variable function">deleteEmployee</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">employeeId</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">'/employee/delete/'</span> <span class="token operator">+</span> employeeId<span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h5 id="_2-assets-目录"><a href="#_2-assets-目录" class="header-anchor">#</a> 2) assets 目录</h5> <p>assets 为静态资源，里面存放 images, styles, icons 等静态资源，静态资源命名格式为 kebab-case</p> <div class="language- extra-class"><pre class="language-text"><code>|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles
</code></pre></div><h5 id="_3-components-目录"><a href="#_3-components-目录" class="header-anchor">#</a> 3) components 目录</h5> <p>此目录应按照组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase</p> <div class="language- extra-class"><pre class="language-text"><code>|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case
</code></pre></div><h5 id="_4-constants-目录"><a href="#_4-constants-目录" class="header-anchor">#</a> 4) constants 目录</h5> <p>此目录存放项目所有常量，如果常量在 vue 中使用，请使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)</p> <p>目录结构：</p> <div class="language- extra-class"><pre class="language-text"><code>|constants
|-- index.js
|-- role.js
|-- employee.js
</code></pre></div><p>例子： employee.js</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">EMPLOYEE_STATUS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token constant">NORMAL</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'正常'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token constant">DISABLED</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'禁用'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token constant">DELETED</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'已删除'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">EMPLOYEE_ACCOUNT_TYPE</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token constant">QQ</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'QQ登录'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token constant">WECHAT</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'微信登录'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token constant">DINGDING</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'钉钉登录'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token constant">USERNAME</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    desc<span class="token operator">:</span> <span class="token string">'用户名密码登录'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token constant">EMPLOYEE_STATUS</span><span class="token punctuation">,</span>
  <span class="token constant">EMPLOYEE_ACCOUNT_TYPE</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_5-router-与-store-目录"><a href="#_5-router-与-store-目录" class="header-anchor">#</a> 5) router 与 store 目录</h5> <p>这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。</p> <p>router 尽量按照 views 中的结构保持一致</p> <p>store 按照业务进行拆分不同的 js 文件</p> <h5 id="_6-views-目录"><a href="#_6-views-目录" class="header-anchor">#</a> 6) views 目录</h5> <ul><li>命名要与后端、router、api 等保持一致</li> <li>components 中组件要使用 PascalCase 规则</li></ul> <div class="language- extra-class"><pre class="language-text"><code>|-- views                            视图目录
|   |-- role                             role模块名
|   |   |-- role-list.vue                    role列表页面
|   |   |-- role-add.vue                     role新建页面
|   |   |-- role-update.vue                  role更新页面
|   |   |-- index.less                      role模块样式
|   |   |-- components                      role模块通用组件文件夹
|   |   |   |-- role-header.vue                        role头部组件
|   |   |   |-- role-modal.vue                         role弹出框组件
|   |-- employee                         employee模块
|   |-- behavior-log                      行为日志log模块
|   |-- code-generator                    代码生成器模块
</code></pre></div><h4 id="_2-2-4-注释说明"><a href="#_2-2-4-注释说明" class="header-anchor">#</a> 2.2.4 注释说明</h4> <p>整理必须加注释的地方</p> <ul><li>公共组件使用说明</li> <li>api 目录的接口 js 文件必须加注释</li> <li>store 中的 state, mutation, action 等必须加注释</li> <li>vue 文件中的 template 必须加注释，若文件较大添加 start end 注释</li> <li>vue 文件的 methods，每个 method 必须添加注释</li> <li>vue 文件的 data, 非常见单词要加注释</li></ul> <h4 id="_2-2-5-其他"><a href="#_2-2-5-其他" class="header-anchor">#</a> 2.2.5 其他</h4> <h5 id="_1-尽量不要手动操作-dom"><a href="#_1-尽量不要手动操作-dom" class="header-anchor">#</a> 1) 尽量不要手动操作 DOM</h5> <p>因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。</p> <h5 id="_2-删除无用代码"><a href="#_2-删除无用代码" class="header-anchor">#</a> 2) 删除无用代码</h5> <p>因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码。</p></div> <footer class="page-edit" style="display:none;"><div class="edit-link"><a href="https://gitee.com/kuangweiwudi/my-node/edit/master/common/front-code-norm.md" target="_blank" rel="noopener noreferrer">提出错误！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> <!----> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-3fb51744><li class="level-2" data-v-3fb51744><a href="/common/front-code-norm.html#一-命名规范" class="sidebar-link" data-v-3fb51744>(一)命名规范</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-1-1-项目命名" class="sidebar-link" data-v-3fb51744>1.1.1 项目命名</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-1-2-目录命名" class="sidebar-link" data-v-3fb51744>1.1.2 目录命名</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-1-3-js、css、scss、html、png-文件命名" class="sidebar-link" data-v-3fb51744>1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-1-4-命名严谨性" class="sidebar-link" data-v-3fb51744>1.1.4 命名严谨性</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#二-html-规范-vue-template-同样适用" class="sidebar-link" data-v-3fb51744>(二)HTML 规范 （Vue Template 同样适用）</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-2-1-html-类型" class="sidebar-link" data-v-3fb51744>1.2.1 HTML 类型</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-2-2-缩进" class="sidebar-link" data-v-3fb51744>1.2.2 缩进</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-2-3-分块注释" class="sidebar-link" data-v-3fb51744>1.2.3 分块注释</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#_1-2-4-语义化标签" class="sidebar-link" data-v-3fb51744>1.2.4 语义化标签</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-2-5-引号" class="sidebar-link" data-v-3fb51744>1.2.5 引号</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#三-css-规范" class="sidebar-link" data-v-3fb51744>(三) CSS 规范</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-3-1-命名" class="sidebar-link" data-v-3fb51744>1.3.1 命名</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-3-2-选择器" class="sidebar-link" data-v-3fb51744>1.3.2 选择器</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-3-3-尽量使用缩写属性" class="sidebar-link" data-v-3fb51744>1.3.3 尽量使用缩写属性</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-3-4-每个选择器及属性独占一行" class="sidebar-link" data-v-3fb51744>1.3.4 每个选择器及属性独占一行</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-3-5-省略0后面的单位" class="sidebar-link" data-v-3fb51744>1.3.5 省略0后面的单位</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-3-6-避免使用id选择器及全局标签选择器防止污染全局样式" class="sidebar-link" data-v-3fb51744>1.3.6 避免使用ID选择器及全局标签选择器防止污染全局样式</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#四-less-规范" class="sidebar-link" data-v-3fb51744>(四) LESS 规范</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-4-1-代码组织" class="sidebar-link" data-v-3fb51744>1.4.1 代码组织</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-将公共less文件放置在style-less-common文件夹" class="sidebar-link" data-v-3fb51744>1)将公共less文件放置在style/less/common文件夹</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-按以下顺序组织" class="sidebar-link" data-v-3fb51744>2)按以下顺序组织</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-4-2-避免嵌套层级过多" class="sidebar-link" data-v-3fb51744>1.4.2 避免嵌套层级过多</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#五-javascript-规范" class="sidebar-link" data-v-3fb51744>(五) Javascript 规范</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-1-命名" class="sidebar-link" data-v-3fb51744>1.5.1 命名</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-采用小写驼峰命名-lowercamelcase-代码中的命名均不能以下划线-也不能以下划线或美元符号结束" class="sidebar-link" data-v-3fb51744>1) 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-方法名、参数名、成员变量、局部变量都统一使用-lowercamelcase-风格-必须遵从驼峰形式。" class="sidebar-link" data-v-3fb51744>2) 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_3-常量命名全部大写-单词间用下划线隔开-力求语义表达完整清楚-不要嫌名字长。" class="sidebar-link" data-v-3fb51744>3) 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-2-代码格式" class="sidebar-link" data-v-3fb51744>1.5.2 代码格式</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-使用-2-个空格进行缩进" class="sidebar-link" data-v-3fb51744>1) 使用 2 个空格进行缩进</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。" class="sidebar-link" data-v-3fb51744>2) 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-3-字符串" class="sidebar-link" data-v-3fb51744>1.5.3 字符串</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-4-对象声明" class="sidebar-link" data-v-3fb51744>1.5.4 对象声明</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-使用字面值创建对象" class="sidebar-link" data-v-3fb51744>1)使用字面值创建对象</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-使用字面量来代替对象构造器" class="sidebar-link" data-v-3fb51744>2) 使用字面量来代替对象构造器</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-5-使用-es6-7" class="sidebar-link" data-v-3fb51744>1.5.5 使用 ES6,7</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-6-括号" class="sidebar-link" data-v-3fb51744>1.5.6 括号</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-7-undefined-判断" class="sidebar-link" data-v-3fb51744>1.5.7 undefined 判断</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-8-条件判断和循环最多三层" class="sidebar-link" data-v-3fb51744>1.5.8 条件判断和循环最多三层</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-9-this-的转换命名" class="sidebar-link" data-v-3fb51744>1.5.9 this 的转换命名</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_1-5-10-慎用-console-log" class="sidebar-link" data-v-3fb51744>1.5.10 慎用 console.log</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#一-vue-编码基础" class="sidebar-link" data-v-3fb51744>(一) Vue 编码基础</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-1-组件规范" class="sidebar-link" data-v-3fb51744>2.1.1. 组件规范</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-组件名为多个单词。" class="sidebar-link" data-v-3fb51744>1) 组件名为多个单词。</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-组件文件名为-pascal-case-格式" class="sidebar-link" data-v-3fb51744>2) 组件文件名为 pascal-case 格式</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_3-基础组件文件名为-base-开头-使用完整单词而不是缩写。" class="sidebar-link" data-v-3fb51744>3) 基础组件文件名为 base 开头，使用完整单词而不是缩写。</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名" class="sidebar-link" data-v-3fb51744>4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_5-在-template-模版中使用组件-应使用-pascalcase-模式-并且使用自闭合组件。" class="sidebar-link" data-v-3fb51744>5) 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_6-组件的-data-必须是一个函数" class="sidebar-link" data-v-3fb51744>6) 组件的 data 必须是一个函数</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_7-prop-定义应该尽量详细" class="sidebar-link" data-v-3fb51744>7) Prop 定义应该尽量详细</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_8-为组件样式设置作用域" class="sidebar-link" data-v-3fb51744>8) 为组件样式设置作用域</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_9-如果特性元素较多-应该主动换行。" class="sidebar-link" data-v-3fb51744>9) 如果特性元素较多，应该主动换行。</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-2-模板中使用简单的表达式" class="sidebar-link" data-v-3fb51744>2.1.2. 模板中使用简单的表达式</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-3-指令都使用缩写形式" class="sidebar-link" data-v-3fb51744>2.1.3 指令都使用缩写形式</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-4-标签顺序保持一致" class="sidebar-link" data-v-3fb51744>2.1.4 标签顺序保持一致</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-5-必须为-v-for-设置键值-key" class="sidebar-link" data-v-3fb51744>2.1.5 必须为 v-for 设置键值 key</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-6-v-show-与-v-if-选择" class="sidebar-link" data-v-3fb51744>2.1.6 v-show 与 v-if 选择</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-7-script-标签内部结构顺序" class="sidebar-link" data-v-3fb51744>2.1.7 script 标签内部结构顺序</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-1-8-vue-router-规范" class="sidebar-link" data-v-3fb51744>2.1.8 Vue Router 规范</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-页面跳转数据传递使用路由参数" class="sidebar-link" data-v-3fb51744>1) 页面跳转数据传递使用路由参数</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-使用路由懒加载-延迟加载-机制" class="sidebar-link" data-v-3fb51744>2) 使用路由懒加载（延迟加载）机制</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_3-router-中的命名规范" class="sidebar-link" data-v-3fb51744>3) router 中的命名规范</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_4-router-中的-path-命名规范" class="sidebar-link" data-v-3fb51744>4) router 中的 path 命名规范</a></li><li class="level-3" data-v-3fb51744><a href="/common/front-code-norm.html#二-vue-项目目录规范" class="sidebar-link" data-v-3fb51744>(二) Vue 项目目录规范</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-2-1-基础" class="sidebar-link" data-v-3fb51744>2.2.1 基础</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-2-2-使用-vue-cli-脚手架" class="sidebar-link" data-v-3fb51744>2.2.2 使用 Vue-cli 脚手架</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-2-3-目录说明" class="sidebar-link" data-v-3fb51744>2.2.3 目录说明</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-api-目录" class="sidebar-link" data-v-3fb51744>1) api 目录</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-assets-目录" class="sidebar-link" data-v-3fb51744>2) assets 目录</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_3-components-目录" class="sidebar-link" data-v-3fb51744>3) components 目录</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_4-constants-目录" class="sidebar-link" data-v-3fb51744>4) constants 目录</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_5-router-与-store-目录" class="sidebar-link" data-v-3fb51744>5) router 与 store 目录</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_6-views-目录" class="sidebar-link" data-v-3fb51744>6) views 目录</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-2-4-注释说明" class="sidebar-link" data-v-3fb51744>2.2.4 注释说明</a></li><li class="level-4" data-v-3fb51744><a href="/common/front-code-norm.html#_2-2-5-其他" class="sidebar-link" data-v-3fb51744>2.2.5 其他</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_1-尽量不要手动操作-dom" class="sidebar-link" data-v-3fb51744>1) 尽量不要手动操作 DOM</a></li><li class="level-5" data-v-3fb51744><a href="/common/front-code-norm.html#_2-删除无用代码" class="sidebar-link" data-v-3fb51744>2) 删除无用代码</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/assets/js/app.892efb48.js" defer></script><script src="/assets/js/3.3689c535.js" defer></script><script src="/assets/js/1.76946483.js" defer></script><script src="/assets/js/17.8d9b3f45.js" defer></script>
  </body>
</html>
